<template>
  <div class="header-warp">
    <!-- <img class="top-bg" src="../../static/img/top-bg.png" mode="widthFix"> -->
    <div class="top-bg"></div>
    <div class="page-content">
      <!-- <cere-header ref="header" :componentContent="componentContent"></cere-header> -->
      <div class="header-content" >
        <img class="header-logo" src="@@/assets/images/logo.png" />
        <div class="header-search" >
          <img class="search-img"  src="@@/assets/images/search.png" />
          <input class="search-input"  type="text" name="FirstName" placeholder="请输入您想要的宝贝">
        </div>
        <img class="header-share"  src="@@/assets/images/share.png" />
      </div>


      <div class="banner-background">
        <cere-banner :componentContent="componentContent" v-if="bannerVisible"></cere-banner>
      </div>
    </div>
  </div>
</template>

<script>
  import CereBanner from './banner'
  import CereHeader from './header'
  export default {
    name: 'shopHeader',
    components: { CereHeader, CereBanner },
    props: {
      terminal: {
        type: Number,
        default: 4
      },
      componentContent: {
        type: Object
      }
    },
    data () {
      return {
        bannerVisible: true
      }
    }
  }
</script>

<style lang="scss" scoped>
input::-webkit-input-placeholder{
    color:#999999;
    margin-left:80px;
    margin-top:10px;
    position:absolute;
    font-size:28px;
}
  .header-warp{
    width: 100%;
    display: flex;
    flex-direction: column;
    // background:-webkit-linear-gradient(top, #00D6B1, #00D6B1, #7AE6C9, #BEEFDC, #F2F9F4);
    .top-bg {
      margin-top:180px;
      height:220px;
      width: 100%;
    }
    .page-content{
      
      width: 100%;
      display: flex;
      flex-direction: column;
      z-index: 10;
      margin-top: -300px;
      .header-content {
        width: 100%;
        position:absolute;
        top:0px;
        background:#00D6B1;
        display:flex;justify-content:space-around;align-items:center;
        padding:20px;
        .header-logo {
          width:160px;height:40px;
        }
        .header-search {
          position:relative;
          .search-img {
            width:32px;height:32px;position:absolute;top:16px;left:24px;
          }
          .search-input {
            width:474px;height:64px;border-radius:51px;
          }
        }
        .header-share {
          width:40px;height:40px
        }
      }

      .banner-background {
        background:-webkit-linear-gradient(top, #00D6B1, #00D6B1, #7AE6C9, #BEEFDC, #F2F9F4);
      }
    }
  }
</style>

